<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id='con'>
        <h1>
            任务列表

        </h1>
        <p>任务总数：xxx；还有：xxx 未完成；<span>【完成】</span> </p>
        <ul>
            <li v-for="(v,i) in arr">
                {{v.name}}
            </li>
        </ul>

        <input type="text" v-model="inputval"> <button @click="add()">添加</button>

        <!-- 添加功能业务流程 -->
        <!-- 1.得到输入框的值
        2.点击按钮调用添加的方法
        3.在添加的方法里面  吧输入框的值 push到arr这个展示数据中 -->
    </div>
    <script>
        new Vue({
            el:"#con",
            data:{
                inputval:"",

                arr:[
                    {name:"设计"},
                    {name:"编写页面代码"},
                    {name:"编写js代码"},
                    {name:"设计产品原型"}
                ]
            },
            methods:{
                add(){
                    console.log(this.inputval)

                    this.arr.push({name:this.inputval})

                    this.inputval=""
                }
            }
        })
    </script>
</body>
</html>